﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQueryPager分页演示</title>
    <link href="CSS/Pager.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.8.0.js" type="text/javascript"></script>
    <script src="Scripts/jquery.pager.js" type="text/javascript"></script>
    <style type="text/css">
        .tb_procudt
        {
            background-color: #0066ff;
            width: 1000px;
            border: 1 solid #ccc;
            font-size: 20px;
        }
    </style>
    <script type="text/javascript">
        var totalProductCounts;
        GetTotal = function () {
            $.ajax({
                url: 'CalProductCounts.ashx',
                type: 'POST',
                timeout: 3000,
                error: function (data) {
                    alert(data);
                },
                success: function (data) {
                    totalProductCounts = parseInt(data, 10);
                }
            });
        }
        $(function () {
            GetTotal();
            $("#pager").pager({
                pagenumber: 1,
                pagecount: totalProductCounts,
                buttonClickCallback: PageClick
            });
            PageClick(1); //页面初次加载时显示第一页
        })

        PageClick = function (pageClickedNumber) {
            $("#pager").pager({
                pagenumber: pageClickedNumber,
                pagecount: totalProductCounts,
                buttonClickCallback: PageClick
            });

            $.ajax({
                url: 'jQueryPagerByPageIndex.ashx',
                type: 'POST',
                data: { "pageIndex": pageClickedNumber },
                timeout: 3000,
                cache:true,
                error: function (data) {
                    $("#divError").html(data);
                },
                success: function (data) {
                    $("#resultProducts").html(data);
                }
            });
        }
    </script>
</head>
<body>
    <div>
        <div id="resultProducts" style="font-size: 13px;">
            分页器
        </div>
        <div id="pager">
        </div>
    </div>
</body>
</html>
